import { Card, Table } from 'antd'
import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer
} from 'recharts'

const data = [
  { name: 'Jan', value: 400 },
  { name: 'Feb', value: 300 },
  { name: 'Mar', value: 200 },
  { name: 'Apr', value: 278 },
  { name: 'May', value: 189 },
  { name: 'Jun', value: 239 },
  { name: 'Jul', value: 349 }
]

const columns = [
  {
    title: 'Month',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: 'Value',
    dataIndex: 'value',
    key: 'value'
  }
]

const ChartTableDisplay = (): JSX.Element => {
  return (
    <div style={{ display: 'flex', gap: '20px', padding: '20px', width: '100%' }}>
      <Card title="Line Chart" style={{ flex: 1 }}>
        <ResponsiveContainer width="100%" height={500}>
          <LineChart data={data} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis dataKey="name" />
            <YAxis />
            <Tooltip />
            <Legend />
            <Line type="monotone" dataKey="value" stroke="#8884d8" strokeWidth={2} />
          </LineChart>
        </ResponsiveContainer>
      </Card>
      <Card title="Data Table" style={{ flex: 1 }}>
        <Table dataSource={data} columns={columns} pagination={false} rowKey="name" />
      </Card>
    </div>
  )
}

export default ChartTableDisplay
